<!--
 * @Description: 类型筛选组件
 * @Author: wangqian
 * @LastEditors: wangqian
 * @Date: 2021-06-22 16:19:24
 * @LastEditTime: 2021-06-22 21:25:45
-->
<template>
  <a-card class="supper-select" :bordered="false" :class="['supper-select_' + type]">
    <div class="supper-select_wrapper">
      <div class="supper-select_title">
        <p>{{ data.name }}:</p>
      </div>
      <div class="supper-select_content">
        <span class="checkbox-list">
          <span
            :class="[
              'checkbox-item',
              { 'checkbox-item_indeterminate': data.attributes?.indeterminate },
            ]"
          >
            <a-checkbox
              value="all"
              :indeterminate="data.attributes?.indeterminate"
              :checked="data?.attributes?.checked"
              @change="onCheckAllChange($event, data)"
            >
              全部
            </a-checkbox>
          </span>

          <span
            v-for="o in data.children"
            :key="o.level"
            :class="[
              'checkbox-item',
              {
                'checkbox-item_indeterminate': o.attributes?.indeterminate,
                collapse: o.attributes.collapse,
              },
            ]"
          >
            <a-checkbox
              :value="o.code"
              :indeterminate="o.attributes.indeterminate"
              :checked="o?.attributes?.checked"
              @change="onCheckChange($event, o)"
            >
              {{ o.name }}
            </a-checkbox>
            <span
              v-if="!o.leaf"
              class="drop-down-icon"
              :class="o.attributes.collapse ? 'active' : ''"
            >
              <caret-up-outlined @click="collapse(o)" v-if="o.attributes.collapse" />
              <caret-down-outlined @click="collapse(o)" v-else />
            </span>
          </span>
        </span>
      </div>
    </div>
    <tree-item
      :data="childrenData"
      v-if="childrenData && childrenData?.name"
      :collapseClick="collapseClick"
      @change="changeHandle"
    ></tree-item>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, ref, watch, nextTick, PropType } from 'vue';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { TreeProps } from '@/typing';
type CollapseClickFunc = (e: any) => void;
export default defineComponent({
  name: 'TreeItem',
  props: {
    data: {
      type: Object as PropType<TreeProps>,
      default: () => ({}),
    },
    type: {},
    collapseClick: {
      request: true,
      type: Function as PropType<CollapseClickFunc>,
    },
  },
  emits: ['change'],
  setup(props, { emit }) {
    const childrenData = ref({});
    watch(
      () => props.data,
      () => {
        nextTick(() => {
          const [currentItem = null] = (props.data?.children || []).filter(
            o => o?.attributes?.collapse,
          );
          childrenData.value = currentItem;
        });
      },
      { deep: true },
    );

    const collapse = item => {
      props.collapseClick && props.collapseClick(item);
    };

    const onCheckAllChange = (e, item) => {
      emit('change', e, item);
    };
    const onCheckChange = (e, item) => {
      emit('change', e, item);
    };
    const changeHandle = (e, item) => {
      emit('change', e, item);
    };

    return {
      collapse,
      onCheckAllChange,
      onCheckChange,
      childrenData,
      changeHandle,
    };
  },
  components: {
    CaretUpOutlined,
    CaretDownOutlined,
  },
});
</script>
<style scoped lang="less">
@card-bg: #2b2d33;
@ai-bg: #261601;
@ai-color: #c27818;
@ai-second-color: #845c27;

@jq-bg: #072630;
@jq-color: #138eb5;
@jq-second-color: #106681;

@fk-bg: #052447;
@fk-color: #1b6ece;
@fk-second-color: #225b9b;

@xqdw-bg: #2b1348;
@xqdw-color: #804ec1;
@xqdw-second-color: #632aac;

:deep(.ant-checkbox) {
  display: none;
}

:deep(.ant-checkbox-wrapper) {
  position: relative;
  display: inline-block;
  height: 28px;
  padding: 0;
  line-height: 28px;
  background: #072630;
  border: 1px solid #106681;
  user-select: none;
  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 55;
    display: block;
    width: 8px;
    height: 8px;
    background: #2b2d33;
    border-right: 1px solid #106681;
    transform: rotate(45deg);
    content: '';
  }
}
:deep(.ant-checkbox-wrapper-checked) {
  background: #138eb5;
}

.supper-select {
  margin-left: -1px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  & > :deep(.ant-card-body) {
    padding: 12px 0px 0px 35px;
    border-top: 1px solid rgba(87, 97, 123, 1);
    border-left: 1px solid rgba(87, 97, 123, 1);
  }
  .supper-select_wrapper {
    display: flex;
    align-items: baseline;
    .supper-select_title {
      padding: 0 8px;
      color: #b9c4dd;
      text-align: right;
    }
    .supper-select_content {
      display: flex;
      flex: 1;
      box-sizing: border-box;
      width: 100%;
      .checkbox-list {
        flex: 1;
        .checkbox-item {
          display: inline-block;
          margin-right: 5px;
          margin-bottom: 6px;
          white-space: nowrap;
          border: 1px solid #303030;
          &.checkbox-item_indeterminate {
            :deep(.ant-checkbox) {
              display: inline-block;
              margin-left: 5px;
            }
          }
        }
        .drop-down-icon {
          display: inline-block;
          height: 28px;
          padding: 0 4px;
          line-height: 28px;
          background: #072630;
          border: 1px solid #106681;
          border-left: none;
          &.active {
            color: #138eb5;
          }
        }
      }
    }
  }
}

.supper-select_type(@bg,@color,@second-color) {
  :deep(.ant-checkbox-wrapper) {
    background: @bg;
    border-color: @second-color;
    &::before {
      background: @card-bg;
      border-right-color: @second-color;
    }
  }
  :deep(.ant-checkbox-wrapper-checked) {
    background: @color;
  }
  .supper-select_wrapper {
    .supper-select_content {
      .checkbox-list {
        .drop-down-icon {
          background: @bg;
          border-color: @second-color;
          &.active {
            color: @color;
          }
        }
      }
    }
  }
}
.supper-select_ai {
  .supper-select_type(@ai-bg,@ai-color,@ai-second-color);
}
.supper-select_jq {
  .supper-select_type(@jq-bg,@jq-color,@jq-second-color);
}
.supper-select_fk {
  .supper-select_type(@fk-bg,@fk-color,@fk-second-color);
}
.supper-select_xqdw {
  .supper-select_type(@xqdw-bg,@xqdw-color,@xqdw-second-color);
}
</style>
